<template>
  <div class="">
    <!-- 增加岗位-->
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" label-position="right">
      <el-form-item label="名称：" prop="jobName">
        <el-input v-model="ruleForm.jobName" style="width: 237.5px;" />
      </el-form-item>
      <el-form-item label="岗位职能：" prop="jobType">
        <el-checkbox-group v-model="checkList" @change="aaa">
          <el-checkbox v-for="(city,i) in cityOptions" :key="i" :label="city.name">{{ city.name }}<span class="check" :style="{textIndent : city.index ? city.index + 'em' : 0}">{{ city.describe }}</span></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- <el-form-item label="医院:" prop="hospitalId">
        <el-select v-model="ruleForm.hospitalId" placeholder="请选择" @change="nameSelect">
          <el-option v-for="item in options" :key="item.id" :label="item.hospitalName" :value="item.id" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="添加角色" prop="jobRole">
        <el-select
          v-model="ruleForm.jobRole"
          multiple
          collapse-tags
          placeholder="请选择"
          style="width: 237.5px;"
          @change="jobRoleListChange"
        >
          <el-option
            v-for="item in jobRoleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio v-model="ruleForm.status" label="启用" />
        <el-radio v-model="ruleForm.status" label="停用" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value: '',
      options: [],
      ruleForm: {
        status: "启用",
      },
      rules: {
        jobName: [
          { required: true, message: '请输入岗位名称', trigger: 'blur' },
        ],
        hospitalId: [
          { required: true, message: '请选择医院', trigger: 'change' },
        ],
      },
      loading: false,
      jobRoleList: [],
      cityOptions: [
        { 'name': '网电人员', 'describe': '岗位成员将进入到开发人员候选列表' },
        { 'name': '咨询师', 'describe': '岗位成员将进入到咨询师候选列表', index: 1 },
        { 'name': '主治医生', 'describe': '岗位成员将进入到主治医生候选列表' },
        { 'name': '主理', 'describe': '岗位成员将进入到主理候选列表', index: 2 },
        { 'name': '回访人员', 'describe': '岗位成员将进入到回访人员候选列表' },
        { 'name': '库管人员', 'describe': '岗位成员将进入到库管人员候选列表' },
        { 'name': '财务人员', 'describe': '岗位成员将能收到收款,退款相关的通知提醒' },
      ],
      checkList: [],
    };
  },
  watch: {
    row: {
      handler(newValue) {

      },
    },
    deep: true,
    immediate: true,
    isEdit: {
      handler(val) {
        if (val && this.row.id) {
          this.ruleForm = JSON.parse(JSON.stringify(this.row));
          if (this.ruleForm.jobRoleList && this.ruleForm.jobRoleList.length > 0) {
            const list = [];
            this.ruleForm.jobRoleList.forEach(item => {
              list.push(item.roleId);
            });
            this.$set(this.ruleForm, "jobRole", list);
          }
          this.checkList = this.ruleForm.jobType.split(",");
        } else {
          this.ruleForm = { status: "启用" };
        }
        console.log(this.ruleForm);
      },
      immediate: true, // 立即触发
    },
  },
  mounted() {
    // this.$nextTick(function() {
    //   if (this.row) {
    //     this.ruleForm = this.row;
    //     if (this.ruleForm.jobRoleList && this.ruleForm.jobRoleList.length > 0) {
    //       const list = [];
    //       this.ruleForm.jobRoleList.forEach(item => {
    //         list.push(item.roleId);
    //       });
    //       this.$set(this.ruleForm, "jobRole", list);
    //       this.checkList = this.ruleForm.jobType.split(",");
    //     }
    //   } else {
    //     this.ruleForm = { status: "启用" };
    //   }
    // });
    this.getAllHospital();
    this.getAllRole();
  },
  methods: {
    aaa(val) {
    },
    async getAllHospital() {
      const res = await this.$api['data/dept/getAllHospital']();
      if (res.code !== 200) return;
      this.options = res.data;
    },
    async getAllRole() {
      const res = await this.$api['data/dept/getAllRole']();
      if (res.code !== 200) return;
      this.jobRoleList = res.data;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return;
        this.$emit('update:loading', true);
        this.ruleForm.jobType = this.checkList.join(",");
        if (!this.row.id) {
          this.$api['data/station/addHisjob']({
            ...this.ruleForm,
          }).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.msgSuccess('增加岗位成功');
          });
        } else {
          this.$api['data/station/modifyHisjob']({
            ...this.ruleForm,
          }).then(res => {
            if (res.code !== 200) return;
            this.$emit('success');
            this.$emit('update:isEdit', false);
            this.msgSuccess('修改岗位成功');
          });
        }
      });
    },
    nameSelect(id) {
      this.options.forEach(item => {
        if (item.id === id) {
          this.ruleForm.hospitalName = item.hospitalName;
        }
      });
    },
    jobRoleListChange(list) {
      const handleList = [];
      this.jobRoleList.forEach(item => {
        if (list.indexOf(item.id) > -1) handleList.push({ roleId: item.id, roleName: item.roleName });
      });
      this.$set(this.ruleForm, "jobRoleList", handleList);
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-checkbox{
  display: block !important;
  .check{
    color: #aeaeae;
    margin-left: 20px;
    display: inline-block;
    text-align: left;
  }
}
.dialog-magin-y{
  margin: 0 150px;
}
</style>
